<template>
  <span class="huixing">
    <span>
      <img
        v-for="(item, index) in xing"
        :key="index"
        src="../../assets/img/huixing.svg"
        alt=""
      />
    </span>
    <span>
      <img
        v-for="(item, indexs) in nxing"
        :key="indexs"
        src="../../assets/img/nxing.svg"
        alt=""
      />
    </span>
  </span>
</template>

<script>
export default {
  props: {
    giScore: {},
  },
  name: "Xing2",
  data() {
    return {
      xing: "",
      nxing: "",
    };
  },
  created() {
    this.getXing();
  },
  methods: {
    getXing() {
      if (this.giScore == 10 || this.giScore >= 9.5) {
        this.xing = 5;
        this.nxing = 0;
      } else if (this.giScore >= 7.5) {
        this.xing = 4;
        this.nxing = 1;
      } else if (this.giScore >= 6) {
        this.xing = 3;
        this.nxing = 2;
      } else if (this.giScore >= 4) {
        this.xing = 2;
        this.nxing = 3;
      } else if (this.giScore >= 2) {
        this.xing = 1;
        this.nxing = 4;
      } else {
        this.xing = 0;
        this.nxing = 5;
      }
    },
  },
};
</script>

<style>
.huixing {
  display: flex;
  align-items: center;
}
.huixing div {
  display: flex;
  align-items: center;
}

.huixing img {
  width: 0.08rem;
  margin-right: 0.01rem;
}
</style>